<template>
  <div>
    <div class="logo-container" data-v-afbec1f4>
      <span
        class="el-avatar el-avatar--square"
        data-v-afbec1f4
        style="height: 44px; width: 44px; line-height: 44px"
      >
        <img
          src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"
          alt=""
        />
      </span>
      <h1 class="logo-title" data-v-afbec1f4>imooc-admin</h1>
    </div>
    <el-menu
      :uniqueOpened="true"
      default-active="$route.path"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <!-- 子集 menu 菜单 -->
      <el-menu-item index="index">
        <i class="el-icon-setting"></i>
        <template #title>{{ list1.title }}</template>
      </el-menu-item>
      <el-submenu :index="index" v-for="(item, index) in list2" :key="index">
        <template #title>
          <i class="el-icon-location"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
          index="3"
          v-for="(ite, ind) in item.children"
          :key="ind"
          >{{ ite.title }}</el-menu-item
        >
      </el-submenu>
      <!-- 具体菜单项 -->
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Queyu1Sidebar",

  data() {
    return {
      list2: {},
      list1: [],
      list: [
        {
          title: "个人中心",
          path: "q",
        },
        {
          title: "用户",
          children: [
            {
              title: "员工管理",
              path: "2-1",
            },
            {
              title: "角色列表",
              path: "",
            },
            {
              title: "权限列表",
              path: "",
            },
          ],
        },
        {
          title: "文章",
          children: [
            {
              title: "文章排名",
              path: "",
            },
            {
              title: "创建文章",
              path: "",
            },
          ],
        },
      ],
    };
  },

  mounted() {
    this.list1 = this.list[0];
    console.log(this.list1);
    this.list2 = this.list.slice(1, 3);
    console.log(this.list2);
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.logo-container[data-v-afbec1f4] {
  height: var(--59cf8ee8) px;
  padding: 10px 0 22px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

element.style {
  height: 44px;
  width: 44px;
  line-height: 44px;
}
.el-avatar--square {
  border-radius: var(--el-avatar-border-radius);
}
.el-avatar {
  --el-avatar-font-color: #fff;
  --el-avatar-background-color: #c0c4cc;
  --el-avatar-text-font-size: 14px;
  --el-avatar-icon-font-size: 18px;
  --el-avatar-border-radius: var(--el-border-radius-base);
  --el-avatar-large-size: 40px;
  --el-avatar-medium-size: 36px;
  --el-avatar-small-size: 28px;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: var(--el-avatar-font-color);
  background: var(--el-avatar-background-color);
  width: var(--el-avatar-large-size);
  height: var(--el-avatar-large-size);
  line-height: var(--el-avatar-large-size);
  font-size: var(--el-avatar-text-font-size);
}
.el-avatar {
    --el-avatar-background-color: none!important;
}
body, html {
    margin: 0;
    padding: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
}
.logo-container{
  background-color: #545c64;
}
.logo-title{
  font-size: 18px;
  color: white;
  padding-left: 10px;
  background-color: #545c64;
}
</style>